<<template>
<div class="app-container">
  <el-container>
  <el-main>
  <el-form :model="questionForm" :rules="rules" ref="questionForm" label-width="100px" class="demo-questionForm">    

  <el-form-item label="选择分类" prop="typeList" required style="display: inline-block; width: 24%;" class="form-item-line">
    <el-col :span="12" class="classfy">
      <el-cascader
        :options="options"
        v-model="questionForm.typeList"
        change-on-select
      >
      </el-cascader>
    </el-col>
  </el-form-item>

  <el-form-item label="题型" required  style="display: inline-block; width: 60%;">
    <el-col :span="5">
      <el-form-item>
        <el-select v-model="questionForm.classify" placeholder="请选择题型" @change="classifyChange" style="margin-left: 0px">
            <el-option label="单选题" value="1" check></el-option>
            <el-option label="多选题" value="2"></el-option>
            <el-option label="主观题" value="3"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">标签</el-col>
    <el-col :span="5">
      <el-form-item prop="">
        <el-input></el-input>
      </el-form-item>
    </el-col>
  </el-form-item>

   <el-form-item label="题干" prop="question" required>
     <el-col :span="12">
       <el-input type="textarea" v-model="questionForm.question" placeholder="请填写题干"></el-input>
     </el-col>    
   </el-form-item>

  <el-form-item
    v-if="domainsVisible"
    v-for="(domain, index) in questionForm.domains"
    :label="'选项及答案'"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, trigger: 'blur', validator: validateDomains
    }"
  >
    <el-col :span="1">
      <el-radio v-model="questionForm.radio" :label="index" v-show="radioVisible"><span v-html="numberConvertLetterFun(index)"></span></el-radio>
      <el-checkbox v-model="domain.checked" :label="index" v-show="checkedVisible"><span v-html="numberConvertLetterFun(index)"></span></el-checkbox>
    </el-col>
    <el-col :span="11">
      <el-input v-model="domain.value"></el-input>
    </el-col>
    <el-col :span="1">
      <el-button @click.prevent="removeDomain(domain)" style="margin-left: 10px;">删除</el-button>
    </el-col>
  </el-form-item>


  <el-form-item v-show="domainsVisible">
    <el-button @click="addDomain">新增选项</el-button>    
  </el-form-item>

   <el-form-item label="备注" prop="remarks">
     <el-col :span="12">
       <el-input type="textarea" v-model="questionForm.remarks"></el-input>
     </el-col>    
   </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('questionForm')" :loading="btnLoading">立即创建</el-button>
    <el-button><router-link to="index">返回</router-link></el-button>
  </el-form-item>
</el-form>
</el-main>
</el-container>
</div>
</template>


<script>
import { Message } from "element-ui";
import { fetchTree } from "@/api/profession";
import { fetchAdd } from "@/api/question";
import { isvalidateRequired } from "@/utils/validate";
import { numberConvertLetter } from "@/utils/index";

export default {
  data() {
    const validateTypeList = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error("请选择类型"));
      } else {
        callback();
      }
    };
    const validateQuestion = (rule, value, callback) => {
      if (!isvalidateRequired(value)) {
        callback(new Error("请输入题干"));
      } else {
        callback();
      }
    };
    const validateRemarks = (rule, value, callback) => {
      if (!isvalidateRequired(value)) {
        callback(new Error("请输入备注"));
      } else {
        callback();
      }
    };
    const validateDomains = (rule, value, callback) => {
      if (!isvalidateRequired(value)) {
        callback(new Error("选项不能为空"));
      } else {
        callback();
      }
    };
    return {
      btnLoading: false,
      validateDomains: validateDomains,
      radioVisible: true,
      checkedVisible: false,
      domainsVisible: true,
      options: [],
      questionForm: {
        typeList: [],
        classify: "1",
        question: "",
        domains: [
          {
            value: "",
            checked: true
          },
          {
            value: "",
            checked: false
          },
          {
            value: "",
            checked: false
          },
          {
            value: "",
            checked: false
          }
        ],
        radio: 0,
        remarks: ""
      },
      rules: {
        typeList: [
          { required: true, trigger: "change", validator: validateTypeList }
        ],
        question: [
          { required: true, trigger: "blur", validator: validateQuestion }
        ],
        remarks: [
          { required: true, trigger: "blur", validator: validateRemarks }
        ]
      }
    };
  },
  created() {
    this.getTree();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.btnLoading = true;
          fetchAdd(this.questionForm)
            .then(response => {
              if (response.data.status === 200) {
                Message.success("添加题目成功");
              } else {
                Message.error("系统异常,添加题目失败");
              }
              this.resetForm(formName);
              this.btnLoading = false;
            })
            .catch(_ => {
              Message.error("系统异常,添加题目失败!!");
              this.btnLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      if (this.questionForm.domains.length === 2) {
        Message.warning("最少两个选项");
      } else {
        var index = this.questionForm.domains.indexOf(item);
        if (index !== -1) {
          this.questionForm.domains.splice(index, 1);
        }
      }
    },
    addDomain() {
      this.questionForm.domains.push({
        value: "",
        key: Date.now()
      });
    },
    getTree() {
      this.treeLoading = true;
      this.$emit("create"); // for test
      fetchTree(this.listQuery).then(response => {
        this.options = response.data.data;
        this.treeLoading = false;
      });
    },
    classifyChange(val) {
      switch (val) {
        case "1":
          this.radioVisible = true;
          this.checkedVisible = false;
          this.domainsVisible = true;
          break;
        case "2":
          this.radioVisible = false;
          this.checkedVisible = true;
          this.domainsVisible = true;
          break;
        case "3":
          this.radioVisible = false;
          this.checkedVisible = false;
          this.domainsVisible = false;
          break;
      }
    },
    numberConvertLetterFun(number) {
      return numberConvertLetter(number);
    }
  }
};
</script>
<style scoped>
.el-form{
  /* position: absolute; */
  width: 60%;
  margin: 0 auto;
}

.el-col-2 {
  width: 8.33333%;
  text-align: right;
  padding-right: 12px;
}
.classfy{
  width: 100%;
}
.el-form-item--medium .el-form-item__content {
  /* margin-left: 10px!important; */
}
</style>
